<template>
  <div>
    <!-- <input type="text" v-model="b">
    <input type="text" v-model="a">
    <input type="text" v-model="valiu"> -->
    <div>
      书名:<input type="text" v-model="obj.name" label="文本" placeholder="请输入书名" />
    </div>
    <div>
      价格:<input type="text" v-model.number=" obj.price" label="文本" placeholder="请输入价格" />
    </div>
    <div>
      数量:<input type="text" v-model.number=" obj.num" label="文本" placeholder="请输入数量" />
    </div>
    <button @click="submit">提交</button>
    <table
    border = "1"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" :checked = "select" @click="SelectAll($event)"/> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
        <main-content/>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
            {{totalPrice}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import MainContent from './components/MainContent.vue'
import { mapGetters, mapMutations } from 'vuex'

export default {
  data () {
    return {
      obj: {
        // 名字
        name: '',
        // 价格
        price: '',
        // 数量
        num: ''
      }
    }
  },
  computed: {
    ...mapGetters(['select', 'totalPrice'])

  },
  components: {
    MainContent
  },
  methods: {
    ...mapMutations(['choice', 'addTo']),
    SelectAll (e) {
      this.choice(e.target.checked)
    },
    submit () {
      this.addTo(this.obj)
      this.obj.name = ''
      this.obj.price = ''
      this.obj.num = ''
    }
  }
}
</script>
<style>
table {
  width: 1666px;
  border-collapse: collapse;
}
</style>
